@use '@ag-grid-community/styles' as ag;
@import 'variables';

@include ag.grid-styles((
        theme: vuestic,
        extend-theme: alpine,
        foreground-color: $textPrimary,
        data-color: $textPrimary,
        disabled-foreground-color: rgba(0, 0, 0, 0.5),
        background-color: transparent,
        header-background-color: transparent,
        subheader-background-color: $backgroundElement,
        subheader-toolbar-background-color: $backgroundSecondary,
        control-panel-background-color: $backgroundSecondary,
        selected-row-background-color: $backgroundElement,
        odd-row-background-color: transparent,
        modal-overlay-background-color: rgba(255, 255, 255, 0.5),
        row-hover-color: transparent,
        column-hover-color: transparent,
        range-selection-border-color: $textPrimary,
        selected-tab-underline-width: 0,
        selected-tab-underline-transition-speed: 0,
        range-selection-chart-category-background-color: rgba(#00FF84, 0.1),
        range-selection-chart-background-color: rgba(#0058FF, 0.1),
        header-cell-hover-background-color: transparent,
        value-change-value-highlight-background-color: rgba(#16A085, 0.5),
        value-change-delta-up-color: var(--va-success, #43a047),
        value-change-delta-down-color: var(--va-danger, #e53935),
        chip-background-color: transparent,
        borders: solid 0,
        borders-critical: solid 1px,
        borders-secondary: solid 0,
        borders-side-button: solid 0,
        side-bar-panel-width: 200px,
        border-radius: 0px,
        border-color: $backgroundBorder,
        secondary-border-color: transparent,
        row-border-color: transparent,
        cell-horizontal-border: solid transparent,
        header-column-separator-display: none,
        header-column-separator-height: 100%,
        header-column-separator-width: 1px,
        header-column-separator-color: $backgroundBorder,
        header-column-resize-handle-display: none,
        header-column-resize-handle-height: 50%,
        header-column-resize-handle-width: 1px,
        header-column-resize-handle-color: $backgroundBorder,
        input-border-color: $inputBorderColor,
        input-disabled-border-color: $backgroundBorder,
        input-disabled-background-color: transparent,
        checkbox-background-color: transparent,
        checkbox-border-radius: $inputBorderRadius,
        checkbox-checked-color: $textPrimary,
        checkbox-unchecked-color: $textPrimary,
        checkbox-indeterminate-color: $textPrimary,
        toggle-button-off-border-color: $textPrimary,
        toggle-button-off-background-color:$textPrimary,
        toggle-button-on-border-color: $textPrimary,
        toggle-button-on-background-color: $textPrimary,
        toggle-button-switch-background-color: $textPrimary,
        toggle-button-switch-border-color: $textPrimary,
        toggle-button-border-width: 1px,
        toggle-button-height: 10px,
        toggle-button-width: 10px,
        input-focus-box-shadow: transparent,
        input-focus-border-color: $focus,
        minichart-selected-chart-color: $textPrimary,
        minichart-selected-page-color: $textPrimary,
        grid-size: 8px,
        icon-size: 10px,
        widget-container-horizontal-padding: 12px,
        widget-container-vertical-padding: 12px,
        widget-horizontal-spacing: 12px,
        widget-vertical-spacing: 8px,
        cell-horizontal-padding: 10px,
        cell-widget-spacing: 10px,
        row-height: calc(var(--ag-grid-size) * 6),
        header-height: calc(var(--ag-grid-size) * 6),
        list-item-height: calc(var(--ag-grid-size) * 4),
        column-select-indent-size: 18px,
        row-group-indent-size: 20px,
        filter-tool-panel-group-indent: 16px,
        font-family: ("Source Sans Pro", sans-serif),
        font-size: 15px,
        card-radius: 0px,
        card-shadow: none,
        popup-shadow: $shadow
));

@import './parts/header';
@import './parts/grid';
@import './parts/footer';
@import './parts/widgets';

.ag-theme-vuestic {
  @include ag-vuestic-theme-part-widgets();
  @include ag-vuestic-theme-part-header();
  @include ag-vuestic-theme-part-grid();
  @include ag-vuestic-theme-part-footer();
}
